import {
  Button, Form, Input, notification,
} from 'antd'
import React, { PureComponent } from 'react'
import { testHDFSConnection } from '../api'
import JSEncrypt from '@/utils/JSEncrypt.js'

const { Item } = Form
const { TextArea } = Input

export default class DataSource extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  testStorageFn = () => {
    const {
      form, id, clearTable, isCheck, data,
    } = this.props
    form.current.validateFields().then(values => {
      this.setState({
        loading: true,
      })
      const pass = isCheck || values.password === '******' ? data.password : JSEncrypt(values.password)
      testHDFSConnection({
        password: pass,
        dsLink: values.dsLink,
        dsType: values.dsType,
        username: values.username,
        server: values.server,
        port: values.port,
        connectionProperty: values.connectionProperty,
        id,
      }).then((res) => {
        if (res.status === 200) {
          clearTable()
          notification.success({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        } else {
          clearTable()
          notification.error({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        }
      })
    })
  }

  render() {
    const { isCheck } = this.props
    return (
      <div>
        <Item
          label="数据源名称"
          name="dsName"
          rules={[{ required: true, message: '请输入数据源名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源名称"
          />
        </Item>
        <Item
          label="数据源描述"
          name="dsDesc"
          rules={[{ required: false }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源描述"
          />
        </Item>
        <Item
          label="服务器"
          name="server"
          rules={[{ required: true, message: '请输入主机或ip名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入主机或ip名称"
          />
        </Item>
        <Item
          label="端口"
          name="port"
          rules={[{ required: true, message: '请输入端口' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入端口"
          />
        </Item>
        <Item
          label="链接属性"
          name="connectionProperty"
        >
          <TextArea disabled={isCheck} rows={4} placeholder="请输入链接属性" />
        </Item>
        <Item
          label="链接信息"
          name="dsLink"
        >
          <Input
            disabled
            placeholder="请输入链接信息"
          />
        </Item>
        <Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button onClick={this.testStorageFn} loading={this.state.loading} type="primary">连接测试</Button>
        </Item>
      </div>
    )
  }
}
